﻿@page "/JsInterop/LocalStorageView"
@using Maanfee.Dashboard.Examples.Views.JsInterop.Components
@using Maanfee.Dashboard.Examples.Views.JsInterop.Pages.JsInterop._003LocalStorage.Codes;

<MaanfeeDashboardPage>
    <MaanfeeDashboardPageHeader PageTitle="Storage API" Title="Storage API  - Maanfee Dashboard" SubTitle="The Storage object of the Web Storage API provides access to the session storage or local storage for a particular domain. This allows you to read, add, modify, and delete stored data items." />

    <DashboardPageContent>
        <DashboardPageSection Title="Examples">
            <MudGrid>
                <MudItem md="12">
                    <MudSimpleTable Dense="@true" Hover="@true" Bordered="@true" Striped="@true" Style="overflow-x: auto;">
                        <thead>
                            <tr>
                                <th>Method</th>
                                <th>Example</th>
                                <th>Selects</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @*Clear*@
                            <tr>
                                <td style="color: #8323d8;">Clear()</td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Success">
                                        await LocalStorage.Clear()
                                    </MudText>
                                </td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Info">
                                        Empty all key out of the storage
                                    </MudText>
                                </td>
                                <td>
                                    <MudButton OnClick="@(()=>OpenExampleDialog("ClearMethod", typeof(ClearMethod)))" StartIcon="@Icons.Material.Filled.PlayArrow" Variant="Variant.Filled" Size="Size.Small" Color="Color.Success">Try</MudButton>
                                </td>
                            </tr>
                            @*Get*@
                            <tr>
                                <td style="color: #8323d8;">Get()</td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Success">
                                        await LocalStorage.Get(KeyName)

                                    </MudText>
                                </td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Info">
                                        Returns the value of the specified key name
                                    </MudText>
                                </td>
                                <td>
                                    <MudButton OnClick="@(()=>OpenExampleDialog("GetSetMethod", typeof(GetSetMethod)))" StartIcon="@Icons.Material.Filled.PlayArrow" Variant="Variant.Filled" Size="Size.Small" Color="Color.Success">Try</MudButton>
                                </td>
                            </tr>
                            @*Key*@
                            <tr>
                                <td style="color: #8323d8;">Key()</td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Success">
                                        await LocalStorage.Key(Index)
                                    </MudText>
                                </td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Info">
                                        Returns the name of the nth key in the storage
                                    </MudText>
                                </td>
                                <td>
                                    <MudButton OnClick="@(()=>OpenExampleDialog("KeyMethod", typeof(KeyMethod)))" StartIcon="@Icons.Material.Filled.PlayArrow" Variant="Variant.Filled" Size="Size.Small" Color="Color.Success">Try</MudButton>
                                </td>
                            </tr>
                            @*Keys*@
                            <tr>
                                <td style="color: #8323d8;">Keys()</td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Success">
                                        await LocalStorage.Keys()
                                    </MudText>
                                </td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Info">
                                        Returns all name of the keys in the storage
                                    </MudText>
                                </td>
                                <td>
                                    <MudButton OnClick="@(()=>OpenExampleDialog("KeysMethod", typeof(KeysMethod)))" StartIcon="@Icons.Material.Filled.PlayArrow" Variant="Variant.Filled" Size="Size.Small" Color="Color.Success">Try</MudButton>
                                </td>
                            </tr>
                            @*Length*@
                            <tr>
                                <td style="color: #8323d8;">Length()</td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Success">
                                        await LocalStorage.Length()
                                    </MudText>
                                </td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Info">
                                        Returns the number of data items stored in the Storage object
                                    </MudText>
                                </td>
                                <td>
                                    <MudButton OnClick="@(()=>OpenExampleDialog("LengthMethod", typeof(LengthMethod)))" StartIcon="@Icons.Material.Filled.PlayArrow" Variant="Variant.Filled" Size="Size.Small" Color="Color.Success">Try</MudButton>
                                </td>
                            </tr>
                            @*Set*@
                            <tr>
                                <td style="color: #8323d8;">Set()</td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Success">
                                        await LocalStorage.Set(KeyName, Value)
                                    </MudText>
                                </td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Info">
                                        Adds a key to the storage, or updates a key's value if it already exists
                                    </MudText>
                                </td>
                                <td>
                                    <MudButton OnClick="@(()=>OpenExampleDialog("GetSetMethod", typeof(GetSetMethod)))" StartIcon="@Icons.Material.Filled.PlayArrow" Variant="Variant.Filled" Size="Size.Small" Color="Color.Success">Try</MudButton>
                                </td>
                            </tr>
                            @*Remove*@
                            <tr>
                                <td style="color: #8323d8;">Remove()</td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Success">
                                        await LocalStorage.Remove(KeyName)
                                    </MudText>
                                </td>
                                <td>
                                    <MudText Typo="Typo.caption" Color="Color.Info">
                                        Removes a key from the storage
                                    </MudText>
                                </td>
                                <td>
                                    <MudButton OnClick="@(()=>OpenExampleDialog("RemoveMethod", typeof(RemoveMethod)))" StartIcon="@Icons.Material.Filled.PlayArrow" Variant="Variant.Filled" Size="Size.Small" Color="Color.Success">Try</MudButton>
                                </td>
                            </tr>
                        </tbody>
                    </MudSimpleTable>
                </MudItem>
            </MudGrid>
        </DashboardPageSection>
    </DashboardPageContent>
</MaanfeeDashboardPage>

@code {

    private void OpenExampleDialog(string CodeFileName, Type Type)
    {
        DialogParameters parameters = new DialogParameters();
        parameters.Add("CodeFileName", CodeFileName);
        parameters.Add("Type", Type);

        var dialog = Dialog.Show<DialogTry>("Try", parameters,
        new DialogOptions()
            {
                MaxWidth = MaxWidth.Large,
                FullWidth = true,
                Position = DialogPosition.Center,
            });

    }
}
